<template>
  <div class="assess-container">
    <div :class="isIos?'center_top_ios':'center_top'">
      <div class="center_top_title">
        <div class="center_title_left">
          <a href="javascript:;" @click="$router.go(-1)" class="go-back">
            <i></i>
          </a>
          职说评价
        </div>
      </div>
      <div class="_center_middle_info">
        <div class="user_name">{{$route.query.realName}}</div>
        <div class="user_position">
          <rater :margin="1" :value="raterVal" v-model="raterVal" :font-size="15"></rater>
        </div>
      </div>
    </div>
    <!--评价输入框-->
    <div :class="isIos?'remark_job_ios':'remark_job'"></div>
    <div class="assess-content">
      <p class="assess-title">编写评价</p>
      <div class="assess-textarea">
          <x-textarea :height="150" :rows="1" v-model="assessVal" :max="200" show-counter placeholder="评价内容将会进入背调资料，请填写与员工实际工作表现相符的内容。"></x-textarea>
      </div>
    </div>
    <div class="next-content">
      <div class="k-checkbox">
        <check-icon :value.sync="isRemind"><span style="color:#F89721;">短信通知被评价人</span></check-icon>
      </div>
    </div>
    <div class="k-footer" @click="submitTxt">
      提交员工表现评价
    </div>
  </div>
</template>

<script>
  import { Rater, Tab, TabItem, XTextarea, CheckIcon,Group } from 'vux'
  import util from '../../libs/util'
    export default {
        data () {
            return {
              isRemind:true,
              assessVal:'',
              raterVal:3,
              isSendSMS:'',
              isIos:false
            }
        },
      created(){
        if (window.navigator.userAgent.indexOf('LBLSIOS') > -1){
          this.isIos = true
        }else {
          this.isIos = false
        }
      },
      components:{
        Rater,
        XTextarea,
        CheckIcon,
        Group
      },
      methods:{
        submitTxt(){
         console.log(this.assessVal,this.raterVal,this.isRemind)
          //提交评价
          if (this.assessVal == ''){
            //提示
            var that = this;
            this.$vux.confirm.show({
              title: '',
              content: '请添加评价内容'
            })
          }else {
            if(this.isRemind){
              this.isSendSMS = 1;
              var _that = this;
              this.$vux.confirm.show({
                title: '',
                content: '是否发送短信通知被评价人',
                onShow () {
                  console.log('confirm出现')
                },
                onHide () {
                  console.log('confirm隐藏')
                },
                onCancel () {
                  console.log('点击取消')
                },
                onConfirm () {
                  _that.submitContent();
                }
              })
            }else {
              this.isSendSMS = 0;
              this.submitContent();
            }
          }
        },
        submitContent(){
          var url = '/lblsapp-h5/v2/secretfiles/commentAdd.json';
          var data = {content:this.assessVal,score:this.raterVal,secretFilesInfoId:this.$route.query.secretFilesInfoId,isSendSMS:this.isSendSMS};
          var that = this;
          util.ajax.post(url, data).then(function(data){
            console.log(data)
              if(data.data.code == 0){
                that.$vux.confirm.show({
                  title: '',
                  content: '评价成功',
                  onShow () {
                    console.log('confirm出现')
                  },
                  onHide () {
                    console.log('confirm隐藏')
                  },
                  onCancel () {
                    console.log('点击取消')
                  },
                  onConfirm () {
                    that.$router.go(-1);
                  }
                })
              }else {
                that.$vux.alert.show({
                  title: '温馨提示',
                  content: data.data.res.msg,
                  onShow () {
//                    console.log('Plugin: I\'m showing')
                  },
                  onHide () {
//                    console.log('Plugin: I\'m hiding')
                  }
                })
              }
          }).catch(function(error){
            console.log(error)
          })
        }
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .assess-container{
    
  }
  .assess-container .center_top{
    background: url('../../assets/img/secret/Mask.png') no-repeat;
    width: 100%;
    height: 130px;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
  }
  .remark_job{
     width: 100%;
    height: 130px;
  }
  
  .remark_job_ios{
    width: 100%;
    height: 150px;
  }

  .assess-container .center_top_ios{
    background: url('../../assets/img/secret/Mask.png') no-repeat;
    width: 100%;
    height: 150px;
    background-size: cover;
    padding-top: 20px;
     position: fixed;
    top: 0;
    left: 0;
  }
  .center_title_left{
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    height: 46px;
    line-height: 46px;
  }
  .center_title_left .go-back{
    position: absolute;
    width: 14.06%;
    height: 45px;
    font-size: 14px;
    color: #212121;
    left:0;
  }
  .center_title_left .go-back i {
    display: block;
    width: 16px;
    height: 16px;
    margin-top: 15px;
    margin-left: 15px;
    background-image: url(../../assets/img/reference/jiantoul.png);
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
  }
  .center_title_right{
    position: absolute;
    right: 6%;
  }
  .center_title_right .center_make_img{
    width: 15px;
    height: 15px;
  }
  .user_name{
    margin-top: 10px;
    font-size: 2rem;
    color: white;
  }
  ._center_middle_info{
    text-align: center;
  }
  .user_position{
    font-size: 1.2rem;
    color: #808080;
  }
  .assess-content{
    margin-top: 25px;
  }
  .assess-title{
    font-size: 1.4rem;
    color: #212121;
    margin: 10px 0 -4px 28px;

  }
  .assess-textarea{
    margin: 10px 15px 0 15px;
    background: white;
    font-size: 1.4rem;
    border-radius: 4px;
    color: #212121;
  }
  .k-checkbox{
    margin-top: 10px;
    padding-left: 2.9%;
  }
  .k-footer{
    width:100%;
    height:49px;
    position: fixed;
    bottom: 0;
    background: #F89721;
    font-size: 1.6rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 48px;
  }
</style>
